<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制</title>
</head>
<link href="../../css/joint.css" rel="stylesheet"/>
<link href="../../css/paper.css" rel="stylesheet"/>
<style>
    .rightDiv{
        border: 1px solid #000000;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 200px;
        height: 600px;
    }
</style>
<body>

<!--画布-->
<div id="paper"></div>

<div class="rightDiv" id="right_paper">

</div>

<script src="../../js/jquery.js"></script>
<script src="../../js/lodash.js"></script>
<script src="../../js/backbone.js"></script>
<script src="../../js/joint.js"></script>

<script>

    //创建主画布
    let graph = new joint.dia.Graph;
    //声明画布
    let paper = new joint.dia.Paper({
        el:$("#paper"),
        width:500,
        height:600,
        gridSize:10,
        drawGrid:true,
        model:graph
    });

    //创建素材画布
    let right_graph = new joint.dia.Graph;
    //声明画布
    let right_paper = new joint.dia.Paper({
        el:$("#right_paper"),
        width:200,
        height:600,
        gridSize:10,
        // drawGrid:true,
        model:right_graph
    });

    var rectangle = new joint.shapes.standard.Rectangle({id:1});
    rectangle.resize(100, 100);
    rectangle.position(50, 10);
    rectangle.attr('root/tabindex', 1);
    rectangle.attr('root/title', 'joint.shapes.standard.Rectangle');
    rectangle.attr('body/fill', '#30d0c6');
    rectangle.attr('body/fillOpacity', 0.5);
    rectangle.attr('label/text', '点我复制');
    rectangle.addTo(right_graph);

    //画布元素点击事件
    right_paper.on('cell:pointerdown', function(cellView, e) {
        copy(rectangle)
    });

    let p = 0;
    function copy(rectangle) {
        p += 10
        let rect = rectangle.clone();
        rect.position(50+p, 10+p);
        rect.addTo(graph)
    }
</script>
</body>
</html>